<template>
  <div>
    <el-affix :offset="40">
        <div>
          <!-- <i>
            <el-icon>
              <ArrowLeft />
            </el-icon>
          </i> -->
          <el-anchor ref="anchorRef" :container="containerRef" direction="horizontal" @click="handleClick">
            <el-anchor-link :href="item.target" :title="item.name" v-for="(item, index) in anchorList">{{
              item.name
              }}
            </el-anchor-link>
          </el-anchor>
          <!-- <i>
            <el-icon>
              <ArrowRight />
            </el-icon>
          </i> -->
        </div>
      </el-affix>
    <div ref="containerRef" class="content-container">
      <div :id="item.target" v-for="(item, index) in anchorList">{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

const anchorList = ref([
  {
    id: "1",
    name: "A模块",
    target: "modelA"
  },
  {
    id: "2",
    name: "B模块",
    target: "modelB"
  },
  {
    id: "3",
    name: "C模块",
    target: "modelC"
  },
  {
    id: "4",
    name: "D模块",
    target: "modelD"
  },
  {
    id: "5",
    name: "E模块",
    target: "modelE"
  },
  {
    id: "6",
    name: "F模块",
    target: "modelF"
  },
  {
    id: "7",
    name: "G模块",
    target: "modelG"
  }
])

const containerRef = ref(null);
const anchorRef = ref(null);

const handleClick = (e, link) => {
  e.preventDefault();
  document.getElementById(link).scrollIntoView({
    behavior: 'smooth'
  })
}

</script>

<style>
/* .nav-anchor-container {
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid #e6e6e6;
  justify-content: center;
  -webkit-box-align: center;
  position: sticky;
  z-index: 10;
} */

.content-container {
  height: 1000px;
  border-bottom: 1px solid #e6e6e6;
  overflow-y: hidden;

  div {
    width: 100%;
    height: 1000px;
    border-bottom: 1px solid #e6e6e6;
    padding-top: 20px;
  }
}

:deep(.el-anchor__link) {
  font-size: 16px !important;
  /* 设置你需要的字体大小 */
  color: red;
}
</style>